<script setup lang="ts">
import {ref} from "vue";
import {getSearch} from "@/api/more";

let YsList = ref()
getSearch().then(res=>{
    if (res.code === 200){
        YsList.value = res.rows[8].itemList.map(item =>{
            item.mediaLink = 'http://192.168.5.120:8199' + item.mediaLink
            return item
        })
    }
    // console.log(YsList.value)
})
</script>

<template>
<div>
    <div id="banner"></div>
    <div id="main">
      <div class="one" v-for="item in YsList" :key="item.id">
        <div class="icons"><img :src="item.mediaLink" alt=""></div>
          <h4>{{item.title}}</h4>
          <p v-html="item.intro"></p>
      </div>
    </div>
</div>
</template>

<style scoped lang="less">
#banner{
    width: 375px;
    height: 160px;
    background-image: url("@/assets/images/0bc5f9e6c4b9fc5a1ec0e4a18671f2c.png");
    background-repeat: no-repeat;
    background-size: 375px 160px;
}
#main{
    width: 350px;
    margin: auto;
    margin-top: -70px;

    .one{
      height: 156pt;
      background-color: white;
      margin-bottom: 10px;
      overflow: hidden;

      .icons{
        width: 83px;
        height: 76px;
        margin: 20px auto 10px;
        border: 1px dashed gainsboro;

        img{
          width: 100%;
          height: 100%;
        }
      }

      h4{
        text-align: center;
        font-weight: 600;
      }

      p{
        //text-indent: 2em;
        color:gray;
        text-align: center;
        font-size: 13px;
        line-height: 14pt;
        margin-top: 10px;
        font-family: '苹方-简 常规体',serif;
      }

    }

}
</style>